{% extends 'base.html' %}

<!-- base页 需要的变量 -->
{% set api_addr = tasks['api_addr'] %}
{% set pro_name_list = tasks['pro_name_list'] %}
{% set pro_num = tasks['pro_num'] %}

<!-- 当前页 需要的变量 -->
{% set pro_name = tasks['pro_name'] %}
{% set host_list = tasks['host_list'] %}
{% set global_variable_list = tasks['global_variable_list'] %}
{% set cron_status = tasks['cron_status'] %}
{% set deploy_status = tasks['deploy_status'] %}
{% set relation_list = tasks['relation_list'] %}
{% set test_case_list = tasks['test_case_list'] %}
{% set tag_name_list = tasks['tag_name_list'] %}
{% set statist_data = tasks['statist_data'] %}
{% set is_run = tasks['is_run'] %}
{% set current_report_url = tasks['current_report_url'] %}
{% set history_report_path = tasks['history_report_path'] %}

{% block css %}
    <link href="/static/css/sweetalert.min.css" rel="stylesheet"/>
    <link href="/static/css/dataTables.bootstrap.css" rel="stylesheet"/>
    <link href="//unpkg.com/layui@2.6.7/dist/css/layui.css" rel="stylesheet"/>
{% endblock %}

{% block content %}

    <div id="page-wrapper">
        <div class="header" style="text-align: center">
            <h1 class="page-header"> API 测 试 - {{pro_name}} </h1>
        </div>
        <!-- 操作区域 -->
        <div id="page-inner" style="margin-top: 30px">
            <div class="row">
               <div class="col-lg-10 col-md-10 col-sm-10" style="margin-left:6%">

                   <div class="col-lg-4 col-md-4 col-sm-4">
                      <div class="panel panel-success" style="font-size:15px">
                         <div class="panel-heading" align="center" style="font-size:18px;font-weight:bold;">
                             Case 导 入
                             <a style="margin-left:10%" href="/api_case_tmpl" download="测试用例模板.xlsx"
                                onMouseOver="this.style.cursor='hand',this.style.color='#FF0000'"
                                onMouseOut="this.style.color='#006699'"> 下 载 模 板
                            </a>
                         </div>
                         <div class="panel-body">
                             <form id="import_action_form" enctype="multipart/form-data">
                                <div class="row">
                                    <div class="form-group" align="center" style="margin-top:2%;">
                                        <div class="col-lg-6 col-md-6 col-sm-6">
                                            <input class="form-control" id="file_id" type="file" name="file_name" />
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-sm-6">
                                            <select class="form-control" name="import_method" id="import_method" style="text-align: center; text-align-last: center;">
                                                <option value="">请选择导入方式</option>
                                                <option value="batch_insert">批 量 新 增</option>
                                                <option value="all_replace">全 部 替 换</option>
                                                <option value="batch_insert_and_replace">批 量 新 增 + 替 换</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group" align="center" style="margin-top:5%">
                                        <div class="col-lg-12 col-md-12 col-sm-12">
                                            {% if is_run %}
                                                <button id="import_btn" name="import_btn" type="button" style="font-size:15px" class="btn btn-success form-control" disabled="disabled"> 批 量 导 入</button>
                                            {% else %}
                                                <button id="import_btn" name="import_btn" type="button" style="font-size:15px" class="btn btn-success form-control" data-loading-text="Importing..." onclick="exec_import('{{ pro_name }}')"> 批 量 导 入</button>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                             </form>
                         </div>
                      </div>
                   </div>

                   <div class="col-lg-4 col-md-4 col-sm-4">
                      <div class="panel panel-info" style="font-size:15px">
                         <div class="panel-heading" align="center" style="font-size:18px;font-weight:bold;">
                             Swagger 解 析
                         </div>
                         <div class="panel-body">
                             <form id="swagger_form" enctype="multipart/form-data">
                                <div class="row">
                                    <div class="form-group" align="center" style="margin-top:2%;">
                                        <div class="col-lg-6 col-md-6 col-sm-6">
                                            <select class="form-control" id="swagger_url" name="swagger_url" style="text-align:center;text-align-last:center;">
                                                <option value="">请选择Host</option>
                                                {% for host_dict in host_list %}
                                                    <option value="{{ host_dict["host_url"] }}">{{ host_dict["host_name"] }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-sm-6" style="margin-top:1%">
                                            <a class="text-info" style="font-size:17px" href="/swagger_case_file" download="Swagger解析.xlsx">下载Excel解析</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group" align="center" style="margin-top:5%">
                                        <div class="col-lg-12 col-md-12 col-sm-12">
                                            <button id="swagger_btn" name="swagger_btn" type="button" style="font-size:15px" class="btn btn-info form-control" data-loading-text="Parsing..." onclick="swagger_parse('{{ pro_name }}')">生 成 Swagger 解 析</button>
                                        </div>
                                    </div>
                                </div>
                             </form>
                         </div>
                      </div>
                   </div>

                   <div class="col-lg-4 col-md-4 col-sm-4">
                      <div class="panel panel-warning" style="font-size:15px">
                         <div class="panel-heading" align="center" style="font-size:18px;font-weight:bold;">
                             Report 查 看
                         </div>
                         <div class="panel-body">
                             <div class="row">
                                 <div class="form-group" align="center" style="margin-top:3%;">
                                     <div class="col-lg-6 col-md-6 col-sm-6">
                                        <a id="a_link" class="text-warning" style="font-size:17px" onclick="window.open('/report_page/{{ pro_name }}')">查看测试报告</a>
                                     </div>
                                     <div class="col-lg-6 col-md-6 col-sm-6">
                                        <a id="history_report_url" class="text-warning" style="font-size:17px" onclick="window.open('{{history_report_path}}')">下载Excel报告</a>
                                     </div>
                                 </div>
                             </div>
                             <div class="row">
                                 <div class="form-group" align="center" style="margin-top:6%">
                                     <div class="col-lg-12 col-md-12 col-sm-12">
                                         <button id="generate_excel" type="button" class="btn btn-warning form-control" style="font-size:15px" onclick="generate_excel('{{ pro_name }}')" >生 成 Excel 报 告</button>
                                     </div>
                                 </div>
                             </div>
                         </div>
                      </div>
                   </div>

               </div>
            </div>

            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-3" style="margin-left:3%">
                    <div class="panel panel-primary" style="font-size:15px">
                         <div class="panel-heading" align="center" style="font-size:18px;font-weight:bold;">
                             设 置 标 签 状 态
                         </div>
                         <div class="panel-body">
                             <form id="import_action_form" enctype="multipart/form-data">
                                <div class="row">
                                    <div class="form-group" style="margin-top:2%;">
                                        <div class="col-lg-6 col-md-6 col-sm-6">
                                            <select class="form-control" name="select_tag" id="select_tag" style="text-align: center; text-align-last: center;">
                                                <option value="">请 选 择 标 签</option>
                                                <option value="all">所有用例</option>
                                                {% for tat_name in tag_name_list %}
                                                    <option value="{{ tat_name }}">{{ tat_name }}</option>
                                                {% endfor %}
                                                <option value="no_tag">无标签::N</option>
                                            </select>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-sm-6">
                                            <select class="form-control" name="select_status" id="select_status" style="text-align: center; text-align-last: center;">
                                                <option value="">请 选 择 状 态</option>
                                                <option value="True">上 线</option>
                                                <option value="False">下 线</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group" style="margin-top:22px">
                                        <div class="col-lg-12 col-md-12 col-sm-12">
                                            {% if is_run %}
                                                <button id="set_status_btn" name="set_status_btn" type="button" style="font-size:15px" class="btn btn-primary form-control" disabled="disabled"> 上 下 线 </button>
                                            {% else %}
                                                <button id="set_status_btn" name="set_status_btn" type="button" style="font-size:15px" class="btn btn-primary form-control" onclick="set_case_status_by_tag('{{pro_name}}')"> 上 下 线</button>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                             </form>
                         </div>
                    </div>
                </div>

                <div class="col-lg-8 col-md-8 col-sm-8">
                    <div class="panel panel-primary" style="font-size:15px">
                        <div class="panel-heading" align="center" style="font-size:18px;font-weight:bold;">
                             相 关 配 置 与 操 作
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="form-group" align="center" style="line-height:45px;">
                                    <div class="col-lg-2 col-md-2 col-sm-2">
                                        {% if deploy_status %}
                                           <button id="deploy_status_btn" type="button" class="btn btn-success form-control" style="font-size:15px" onclick="update_run_type_status('{{ pro_name }}', 'deploy')">部署_开启</button>
                                        {% else %}
                                           <button id="deploy_status_btn" type="button" class="btn btn-danger form-control" style="font-size:15px" onclick="update_run_type_status('{{ pro_name }}', 'deploy')">部署_关闭</button>
                                        {% endif %}
                                    </div>
                                    <div class="col-lg-2 col-md-2 col-sm-2">
                                        <button id="stop_status_btn" type="button" class="btn btn-primary form-control" style="font-size:15px" onclick="stop_status('{{ pro_name }}')"> 停止运行状态</button>
                                    </div>
                                    <div class="col-lg-2 col-md-2 col-sm-2">
                                        <button class="btn btn-primary form-control" type="button" style="font-size:15px" data-toggle="modal" data-target="#show_relation"> 查看关联用例 </button>
                                    </div>
                                    <div class="col-lg-2 col-md-2 col-sm-2">
                                        <button type="button" class="btn btn-primary form-control" style="font-size:15px" data-toggle="modal" data-target="#instructions"> 使 用 说 明 </button>
                                    </div>

                                    <div class="col-lg-4 col-md-4 col-sm-4" style="margin-top:7px">
                                        <div class="input-group">
                                            <span class="input-group-addon">选择HOST</span>
                                            <div class="fg-line">
                                                <select class="form-control" id="host" name="host" style="text-align: center; text-align-last: center;">
                                                    <option value=""></option>
                                                    {% for host_dict in host_list %}
                                                        <option value="{{ host_dict["host_url"] }}">{{ host_dict["host_name"] }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group" align="center" style="line-height:55px;">
                                    <div class="col-lg-2 col-md-2 col-sm-2">
                                        {% if cron_status %}
                                           <button id="cron_status_btn" type="button" class="btn btn-success form-control" style="font-size:15px" onclick="update_run_type_status('{{ pro_name }}', 'cron')">定时_开启</button>
                                        {% else %}
                                           <button id="cron_status_btn" type="button" class="btn btn-danger form-control" style="font-size:15px" onclick="update_run_type_status('{{ pro_name }}', 'cron')">定时_关闭</button>
                                        {% endif %}
                                    </div>
                                    <div class="col-lg-2 col-md-2 col-sm-2">
                                        <button id="check_depend_variable_btn" type="button" class="btn btn-primary form-control" style="font-size:15px" onclick="check_depend_variable('{{ pro_name }}')"> 检测依赖变量 </button>
                                    </div>
                                    <div class="col-lg-2 col-md-2 col-sm-2">
                                        <button id="check_global_variable_btn" type="button" class="btn btn-primary form-control" style="font-size:15px" onclick="check_global_variable('{{ pro_name }}')"> 检测全局变量 </button>
                                    </div>
                                    <div class="col-lg-2 col-md-2 col-sm-2">
                                        <button type="button" class="btn btn-primary form-control" style="font-size:15px" data-toggle="modal" data-target="#add_global_variable_form"> 配置全局变量 </button>
                                    </div>
                                    <div class="col-lg-2 col-md-2 col-sm-2">
                                        <button type="button" class="btn btn-primary form-control" style="font-size:15px" data-toggle="modal" data-target="#add_host_form">配置HOST</button>
                                    </div>

                                    <div class="col-lg-2 col-md-2 col-sm-2">
                                        {% if is_run %}
                                            <button type="button" style="font-size:15px" class="btn btn-warning form-control">用 例 运 行 中</button>
                                        {% else %}
                                            <button id="test_btn" name="test_btn" type="button" style="font-size:15px" class="btn btn-primary form-control"
                                                    data-loading-text="Running..." onclick="exec_test('{{ pro_name }}')">执 行 测 试</button>
                                        {% endif %}
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>
               </div>

            </div>
        </div>
        <!-- 用例列表 -->
        <div id="page-inner2">
           <div class="row">
              <div class="col-lg-11 col-md-11 col-sm-11" style="margin-left:3%">
                <div class="panel panel-info">
                    <div id="statist_data" class="panel-heading" align="left" style="font-size:20px; font-weight: bold;">
                        用 例 总 数（ <font color="#5B00AE">依 赖 : {{ statist_data['depend'] }} &nbsp;&nbsp; 测 试 : {{ statist_data['test'] }}</font> )  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        最 新 测 试 结 果  <  <font color="#5B4B00">总 计 : {{ statist_data['success'] + statist_data['fail'] + statist_data['error'] }}</font>&nbsp;&nbsp;&nbsp;
                                            <font color="#008000">成 功 : {{ statist_data['success'] }}</font>&nbsp;&nbsp;&nbsp;&nbsp;
                                            <font color="#c23531">失 败 : {{ statist_data['fail'] }}</font>&nbsp;&nbsp;&nbsp;&nbsp;
                                            <font color="#ca8622">错 误 : {{ statist_data['error'] }}</font>&nbsp;&nbsp;&nbsp;>
                    </div>
                    <div class="panel-body">
                        <div class="card">
                            <div class="card-body card-padding">

                                <div class="row" role="form">
                                    <div class="col-lg-2 col-md-2 col-sm-2">
                                        <div class="fg-line">
                                            <input id="interface_name" name="interface_name" type="text" class="form-control" placeholder="接口名称">
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-2 col-sm-2">
                                        <div class="input-group">
                                            <span class="input-group-addon">请求方式</span>
                                            <div class="fg-line">
                                                <select class="form-control" id="request_method" name="request_method" style="text-align: center; text-align-last: center;">
                                                    <option value="">全部</option>
                                                    <option value="GET">GET</option>
                                                    <option value="POST">POST</option>
                                                    <option value="PUT">PUT</option>
                                                    <option value="DELETE">DELETE</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-2 col-sm-2">
                                        <div class="input-group">
                                            <span class="input-group-addon">用例状态</span>
                                            <div class="fg-line">
                                                <select class="form-control" id="case_status" name="case_status" style="text-align: center; text-align-last: center;">
                                                    <option value="">全部</option>
                                                    <option value="True">上线</option>
                                                    <option value="False">下线</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-2 col-sm-2">
                                        <div class="input-group">
                                            <span class="input-group-addon">最新执行</span>
                                            <div class="fg-line">
                                                <select class="form-control" id="relate_run_time" name="relate_run_time" style="text-align: center; text-align-last: center;">
                                                    <option value="False">不匹配</option>
                                                    <option value="True">匹配</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-2 col-sm-2">
                                        <button id="search_btn" type="button" class="btn btn-primary form-control" style="font-size:15px" onclick="search_case('{{ pro_name }}')"> 搜 索 </button>
                                    </div>

                                    <div class="col-lg-2 col-md-2 col-sm-2">
                                        <button class="btn btn-primary form-control" type="button" style="font-size:15px" data-toggle="modal" data-target="#add_case_form"> 新 增 用 例 </button>
                                    </div>
                                </div>
                                <div class="row" role="form" style="margin-top:10px">
                                    <div class="col-lg-2 col-md-2 col-sm-2">
                                        <div class="fg-line">
                                            <input id="interface_url" name="interface_url" type="text" class="form-control" placeholder="接口地址">
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-2 col-sm-2">
                                        <div class="input-group">
                                            <span class="input-group-addon">标签名称</span>
                                            <div class="fg-line">
                                                <select class="form-control" id="tag_name" name="tag_name" style="text-align: center; text-align-last: center;">
                                                    <option value="">全部</option>
                                                    {% for tat_name in tag_name_list %}
                                                        <option value="{{ tat_name }}">{{ tat_name }}</option>
                                                    {% endfor %}
                                                    <option value="no_tag">无标签::N</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-2 col-sm-2">
                                        <div class="input-group">
                                            <span class="input-group-addon">用例类型</span>
                                            <div class="fg-line">
                                                <select class="form-control" id="case_type" name="case_type" style="text-align: center; text-align-last: center;">
                                                    <option value="">全部</option>
                                                    <option value="depend">依赖</option>
                                                    <option value="test">测试</option>
                                                    <option value="relation">关联</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-2 col-sm-2">
                                        <div class="input-group">
                                            <span class="input-group-addon">测试结果</span>
                                            <div class="fg-line">
                                                <select class="form-control" id="test_result" name="test_result" style="text-align: center; text-align-last: center;">
                                                    <option value="">全部</option>
                                                    <option value="success">成功</option>
                                                    <option value="fail">失败</option>
                                                    <option value="error">错误</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    {# 搜索 条数 #}
                                    <div class="col-lg-2 col-md-2 col-sm-2" style="color:#3A006F; line-height:35px; font-size:18px;text-align: center;" id="search_case_num">共 {{ statist_data['depend'] + statist_data['test'] }} 条</div>

                                </div>

                                <div class="table-responsive" style="margin-top: 1%">
                                    <table class="table table-striped">
                                        <thead>
                                        <tr>
                                            <th style="font-size:18px;">接口名称</th>
                                            <th style="font-size:18px;" class="text-center">方式</th>
                                            <th style="font-size:18px;">接口地址</th>
                                            <th style="font-size:18px;">验证字段</th>
                                            <th style="font-size:18px;" class="text-center">验证模式</th>
                                            <th style="font-size:18px;" class="text-center">状态</th>
                                            <th style="font-size:18px;" class="text-center">测试结果</th>
                                            <th style="font-size:18px;" class="text-center">上次测试时间</th>
                                            <th style="font-size:18px;" class="text-center">操作</th>
                                        </tr>
                                        </thead>
                                        <tbody id="case_tbody">
                                        {% for test_case in test_case_list %}
                                            {% set _id = test_case["_id"] %}
                                            {% set interface_name = test_case["interface_name"] %}
                                            {% set request_method = test_case["request_method"] %}
                                            {% set request_header = test_case["request_header"] %}
                                            {% set interface_url = test_case["interface_url"] %}
                                            {% set request_params = test_case["request_params"] %}
                                            {% set request_body = test_case["request_body"] %}
                                            {% set compare_core_field_name_list = test_case["compare_core_field_name_list"] %}
                                            {% set expect_core_field_value_list = test_case["expect_core_field_value_list"] %}
                                            {% set expect_field_name_list = test_case["expect_field_name_list"] %}
                                            {% set verify_mode = test_case["verify_mode"] %}
                                            {% set is_depend = test_case["is_depend"] %}
                                            {% set depend_level = test_case["depend_level"] %}
                                            {% set depend_field_name_list = test_case["depend_field_name_list"] %}
                                            {% set depend_field_value_list = test_case["depend_field_value_list"] %}
                                            {% set actual_core_field_value_list = test_case["actual_core_field_value_list"] %}
                                            {% set actual_field_name_list = test_case["actual_field_name_list"] %}
                                            {% set case_status = test_case["case_status"] %}
                                            {% set exec_time = test_case["exec_time"] %}
                                            {% set test_result = test_case["test_result"] %}
                                            {% set tag_name = test_case["tag_name"] %}
                                            {% set upstream_relation_case = test_case["upstream_relation_case"] %}
                                            {% set downstream_relation_field_name_list = test_case["downstream_relation_field_name_list"] %}
                                            {% set is_relation = upstream_relation_case != "" or downstream_relation_field_name_list != [] %}
                                            <tr>
                                                {# 接口名称（标签名称）#}
                                                <td style="width: 150px; color:#4D0000; display:table-cell; vertical-align:middle;" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-container="body" title="标签名称" data-content="{{ tag_name }}">{{ interface_name }}
                                                    {% if is_depend %}<font color="#AE57A4">(依赖)</font>{% else %}{% if is_relation %}<font color="#6F00D2">[关联]</font>{% endif %}{% endif %}
                                                </td>

                                                {# 请求方式（请求头文件）#}
                                                {% if request_header %}
                                                    <td class="text-center" style="width: 100px; color:#4D0000; display:table-cell; vertical-align:middle;" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-container="body" title="请求头文件" data-content="{{ request_header }}">{{ request_method }}</td>
                                                {% else %}
                                                    <td class="text-center" style="width: 100px; color:#4D0000; display:table-cell; vertical-align:middle;">{{ request_method }}</td>
                                                {% endif %}

                                                {# 接口地址（请求参数、请求正文体）#}
                                                {% if not request_params and not request_body %}
                                                    <td style="width: 200px; color:#4D0000; display:table-cell; vertical-align:middle;">{{ interface_url }}</td>
                                                {% else %}
                                                    {% if request_method == "GET" %}
                                                        <td style="width: 200px; color:#4D0000; display:table-cell; vertical-align:middle;" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-container="body" title="请求参数" data-content="{{ request_params }}">{{ interface_url }}</td>
                                                    {% else %}
                                                        <td style="width: 200px; color:#4D0000; display:table-cell; vertical-align:middle;" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-container="body" title="请求正文体" data-content="{{ request_body }}">{{ interface_url }}</td>
                                                    {% endif %}
                                                {% endif %}

                                                {% if is_depend %}
                                                    {# 依赖字段值（依赖的字段名列表、依赖的字段值列表）#}
                                                    <td style="width: 150px; color:#4D0000; display:table-cell; vertical-align:middle;" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-container="body" title="字段名：{{ depend_field_name_list }}" data-content="字段值：{{ depend_field_value_list }}"><span style="font-size:14px" class="label label-info">依赖字段值</span></td>
                                                    {# 依赖等级（测试信息）#}
                                                    <td class="text-center" style="width: 100px; color:#4D0000; display:table-cell; vertical-align:middle;" onclick="show_response_info('{{ pro_name }}', '{{ _id }}', '_case')"  data-toggle="modal" data-target="#show_depend_response_info">依赖等级：{{ depend_level }}</td>
                                                {% else %}
                                                    {# 验证关键字段（期望的关键字段值）#}
                                                    <td style="width: 150px; color:#4D0000; display:table-cell; vertical-align:middle;" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-container="body" title="期望的关键字段值" data-content="{{ expect_core_field_value_list }}">{{ compare_core_field_name_list }}</td>
                                                    {# 验证模式（测试信息）#}
                                                    <td class="text-center" style="width: 100px; color:#4D0000; display:table-cell; vertical-align:middle;" onclick="show_response_info('{{ pro_name }}','{{ _id }}', '_case')" data-toggle="modal" data-target="#show_test_response_info">
                                                        {% if verify_mode == 1 %} 仅关键字段 {% else %} 关键字段+响应字段列表 {% endif %}
                                                    </td>
                                                {% endif %}

                                                {# 用例状态 #}
                                                <td class="text-center" style="width:100px; color:#4D0000; display:table-cell; vertical-align:middle;" onclick="update_case_status('{{pro_name}}', '{{_id}}')" id="case_status_{{_id}}">
                                                {% if case_status %}
                                                    <font color="#00A600">上线</font>
                                                {% else %}
                                                    <font color="#DC143C">下线</font>
                                                {% endif %}
                                                </td>

                                                {# 测试结果（测试结果信息）#}
                                                <td class="text-center" style="width: 100px; display:table-cell; vertical-align:middle;" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-container="body" title="测试结果信息" data-content="{{ test_result }}">
                                                    {% if is_depend %}
                                                        {% if "success" in test_result %}
                                                            <font color="#00A600"> 依赖成功 </font>
                                                        {% elif "fail" in test_result %}
                                                            <font color="#DC143C"> 依赖失败 </font>
                                                        {% elif "error" in test_result %}
                                                            <font color="#C6A300"> 配置错误 </font>
                                                        {% else %}
                                                        {% endif %}
                                                    {% else %}
                                                        {% if "依赖" in test_result%}
                                                            <span id="exec_result" style="font-size:14px" class="label label-warning"> 依赖错误 </span>
                                                        {% elif "success" in test_result %}
                                                            <span id="exec_result" style="font-size:14px" class="label label-success"> 测试成功 </span>
                                                        {% elif "fail" in test_result %}
                                                            <span id="exec_result" style="font-size:14px" class="label label-danger"> 测试失败 </span>
                                                        {% elif "error" in test_result %}
                                                            <span id="exec_result" style="font-size:14px" class="label label-warning"> 配置错误 </span>
                                                        {% else %}
                                                            <span id="exec_result" style="font-size:14px" class="label label-info"></span>
                                                        {% endif %}
                                                    {% endif %}
                                                </td>

                                                {# 上次执行时间 #}
                                                <td class="text-center" style="width: 150px; color:#4D0000; display:table-cell; vertical-align:middle;">{{ exec_time }}</td>

                                                {# 操作 #}
                                                <td class="text-center" style="width: 100px; display:table-cell; vertical-align:middle;">
                                                    {% if is_run %}
                                                        <button class="btn btn-default" type="button" disabled="disabled"><i class="fa fa-edit" style="color: #6A5ACD"></i></button>
                                                        <button class="btn btn-default" type="button" disabled="disabled"><i class="fa fa-trash-o fa-lg" style="color: #ff0000"></i></button>
                                                    {% else %}
                                                        <button class="btn btn-default" type="button" onclick="fill_edit_frame('{{ pro_name }}', '{{ _id }}', '_case')" data-toggle="modal" data-target="#edit_case_form"><i class="fa fa-edit" style="color: #6A5ACD"></i></button>
                                                        <button class="btn btn-default" type="button" onclick="del_case('{{ pro_name }}', '{{ _id }}')"><i class="fa fa-trash-o fa-lg" style="color: #ff0000"></i></button>
                                                    {% endif %}

                                                </td>
                                            </tr>
                                        {% endfor %}

                                        </tbody>

                                    </table>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
              </div>
           </div>
        </div>
    </div>

    <!-- 回到顶部 -->
    <div style="position:fixed;right:50px; bottom:30px; width:20px; height:20px;cursor:pointer">
        <a href="#"><span class="glyphicon glyphicon-eject" style = "font-size:30px;" aria-hidden="true"></span></a>
    </div>

    <!-- 查看关联结构 -->
    <div id="show_relation" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <div class="modal-title">
                        <h2 class="text-center">查 看 关 联 用 例</h2>
                    </div>
                </div>

                <div class="modal-body">
                    {% for case in relation_list %}
                        {% if case["downstream_relation_field_name_list"] %}
                            <div class="col-md-12" style="font-size:16px;color:#3A006F;margin-bottom:10px">{{ case['interface_name'] }} : {{ case['downstream_relation_field_name_list'] }} -> {{ case['downstream_relation_field_value_list'] }} </div>
                        {% else %}
                            <div class="col-md-12" style="font-size:16px;color:#3A006F;margin-bottom:10px">{{ case['interface_name'] }}</div>
                            <HR align="center" width="500" color="#987cb9" SIZE=1>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <!-- 使用说明窗口 -->
    <div id="instructions" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <div class="modal-title">
                        <h2 class="text-center">配 置 使 用 说 明</h2>
                    </div>
                </div>

                <div class="modal-body">
                    <div class="row" style="font-size:14px; margin-left:2%; color:#5B4B00;">
                        <div class="col-md-12" style="font-size:16px;color:#842B00;">【 用 例 表 单 填 写 规 则 】</div>
                        <div class="col-md-12" style="margin-top:1%">1.依赖接口必填项：必填 + 依赖必填 + 依赖必选</div>
                        <div class="col-md-12">2.测试接口必填项：必填 + 测试必填 + 测试必选</div>
                        <div class="col-md-12">3.接口名称：可以使用::区分同一个接口的不同用例 ( 查询接口::用例01 )</div>
                        <div class="col-md-12">4.请求头文件: {"Content-Type":"application/json"}</div>
                        <div class="col-md-12">5.请求参数 : ?name=测试&token=30</div>
                        <div class="col-md-12">6.请求正文体: {"name":"测试","age":30}</div>
                        <div class="col-md-12">7.xxxx列表: 可使用英文逗号分隔多个验证字段</div>
                    </div>
                    <HR align="center" width="500" color="#987cb9" SIZE=1>
                    <div class="row" style="font-size:14px; margin-left:2%; color:#5B4B00;">
                        <div class="col-md-12" style="font-size:16px;color:#842B00;">【 正 文 体 格 式 对 应 的 请 求 头 文 件 】</div>
                        <div class="col-md-12" style="margin-top:1%">1.Json格式：请求头 {"Content-Type":"application/json"}</div>
                        <div class="col-md-12">2.表单格式：请求头 {"Content-Type":"application/x-www-form-urlencoded"}</div>
                        <div class="col-md-12">3.文件格式：请求头 不能含有"Content-Type"字段 </div>
                        <div class="col-md-12"> ( 带cookie：请求头 {"Cookie":"uid=xxxxx;token=xxxxx"} )</div>
                    </div>
                    <HR align="center" width="500" color="#987cb9" SIZE=1>
                    <div class="row" style="font-size:14px; margin-left:2%; color:#5B4B00;">
                        <div class="col-md-12" style="font-size:16px;color:#842B00;">【 正 文 体 格 式 对 应 的 请 求 正 文 体 】</div>
                        <div class="col-md-12" style="margin-top:1%">1.Json格式：正文体 {"name": "测试", "age": 30}</div>
                        <div class="col-md-12">2.表单格式：正文体 name=测试&age=30</div>
                        <div class="col-md-12">3.文件格式：正文体 {"file": "xxx/xxx/xxx.excel"}</div>
                    </div>
                     <HR align="center" width="500" color="#987cb9" SIZE=1>
                    <div class="row" style="font-size:14px; margin-left:2%; color:#5B4B00;">
                        <div class="col-md-12" style="font-size:16px;color:#842B00;">【 依 赖 字 段 名 列 表 规 则 】</div>
                        <div class="col-md-12" style="margin-top:1%">1.从响应头中获取依赖变量的，使用 变量名::H （ token::H )</div>
                        <div class="col-md-12">2.从响应体中获取依赖变量的，使用 变量名 ( token )</div>
                        <div class="col-md-12">（1）获取第一个name值 -> token</div>
                        <div class="col-md-12">（2）获取第三个name值 -> token::3</div>
                        <div class="col-md-12">（3）获取最后一个name值 -> token::0</div>
                    </div>
                    <HR align="center" width="500" color="#987cb9" SIZE=1>
                    <div class="row" style="font-size:14px; margin-left:2%; color:#5B4B00;">
                        <div class="col-md-12" style="font-size:16px;color:#842B00;">【 待 比 较 关 键 字 段 名 列 表 规 则 】</div>
                        <div class="col-md-12" style="margin-top:1%">1.验证HTTP状态码：使用 httpCode </div>
                        <div class="col-md-12">2.验证HTTP响应时间(毫秒)：使用 httpRT </div>
                        <div class="col-md-12">3.若待验证字段有多个返回值的：使用 ::N </div>
                        <div class="col-md-12">（1）验证第一个name值 -> name</div>
                        <div class="col-md-12">（2）验证第三个name值 -> name::3</div>
                        <div class="col-md-12">（3）验证最后一个name值 -> name::0</div>
                        <div class="col-md-12">4.验证字段匹配模式：使用 ::S、::E、::C </div>
                        <div class="col-md-12">（1）验证第一个name值(开始部分) -> name::S</div>
                        <div class="col-md-12">（2）验证第三个name值(结尾部分) -> name::3::E</div>
                        <div class="col-md-12">（3）验证最后一个name值(任意部分) -> name::0::C</div>
                    </div>
                    <HR align="center" width="500" color="#987cb9" SIZE=1>
                    <div class="row" style="font-size:14px; margin-left:2%; color:#5B4B00;">
                        <div class="col-md-12" style="font-size:16px;color:#842B00;">【 关 联 接 口 配 置 规 则 】</div>
                        <div class="col-md-12" style="margin-top:1%"> 1.[ 举 例 ]</div>
                        <div class="col-md-12">（1）关联链路 ：接口3 -> 接口2 -> 接口1 </div>
                        <div class="col-md-12">（2）注意点1 ：同一链路中的用例，采用同步上下线原则  </div>
                        <div class="col-md-12">（3）注意点2 ：上下游用例，采用一对一的绑定原则 </div>
                        <div class="col-md-12">2.[ 配 置 ] </div>
                        <div class="col-md-12">（1）接口1：上游关联用例 ( 无 ),下游关联字段 [ key1 ] </div>
                        <div class="col-md-12">（2）接口2：上游关联用例 ( 接口1 ),下游关联字段 [ key2,key3 ] </div>
                        <div class="col-md-12">（3）接口3：上游关联用例 ( 接口2 ),下游关联字段 ( 无 ) </div>
                        <div class="col-md-12">3.[ 解 释 ] </div>
                        <div class="col-md-12">（1）接口1：顶层接口,响应字段 [ key1 ] 可被下游接口使用</div>
                        <div class="col-md-12">（2）接口2：中层接口,响应字段 [ key2,key3 ] 可被下游接口使用,可使用 [ key1 ] 字段</div>
                        <div class="col-md-12">（3）接口3：底层接口,可使用 [ key1,key2,key3 ] 字段</div>
                    </div>
                    <HR align="center" width="500" color="#987cb9" SIZE=1>
                    <div class="row" style="font-size:14px; margin-left:2%; color:#5B4B00;">
                        <div class="col-md-12" style="font-size:16px;color:#842B00;">【 全 局 | 依 赖 | 关 联 等 变 量 使 用 规 则 】</div>
                        <div class="col-md-12" style="margin-top:1%">1.使用 全局变量：&lt; 全局变量名 &gt;</div>
                        <div class="col-md-12">2.使用 关联变量： [ 关联变量名 ]、[ 关联变量名::2 ] </div>
                        <div class="col-md-12">3.使用 依赖变量： { { 依赖变量名 } }、{ { 依赖变量名::0 } }、{ { 依赖变量名::H } } </div>
                        <div class="col-md-12">4.当变量在{}中使用时：需要加上双引号</div>
                        <div class="col-md-12">（1）{"file": "&lt; excel_file &gt;"}</div>
                        <div class="col-md-12">（2）{"uid": "[ uid::2 ]"}</div>
                        <div class="col-md-12">（3）{"token": "{ { token::H } }"}</div>
                    </div>
                    <HR align="center" width="500" color="#987cb9" SIZE=1>
                    <div class="row" style="font-size:14px; margin-left:2%; color:#5B4B00;">
                        <div class="col-md-12" style="font-size:16px;color:#842B00;">【 标 签 名 称 搜 索 规 则 】</div>
                        <div class="col-md-12" style="margin-top:1%">1.模糊搜索：使用 tag名 ( 回归,监控 )</div>
                        <div class="col-md-12">2.精确搜索：使用 tag名::A ( 回归,监控::A )</div>
                        <div class="col-md-12">3.搜索无标签的：使用 ::N ( ::N )</div>
                    </div>
                    <HR align="center" width="500" color="#987cb9" SIZE=1>
                    <div class="row" style="font-size:14px; margin-left:2%; color:#5B4B00;">
                        <div class="col-md-12" style="font-size:16px;color:#842B00;">【 接 口 执 行 流 程 】</div>
                        <div class="col-md-12" style="margin-top:1%">1.执行 '依赖类型接口' ：</div>
                        <div class="col-md-12">（1）按照 '依赖等级' 从小到大排序</div>
                        <div class="col-md-12">（2）替换 '依赖接口' 中的依赖字段</div>
                        <div class="col-md-12">（3）执行 '依赖接口' 捕获依赖变量</div>
                        <div class="col-md-12">（4）替换 '测试接口' 中的依赖字段</div>
                        <div class="col-md-12">2.执行 '测试类型接口' ：</div>
                        <div class="col-md-12">（1）区分 '关联'接口、'非关联'接口</div>
                        <div class="col-md-12">（2）先执行 '关联'接口，再执行 '非关联'接口</div>
                        <div class="col-md-12">3.'关联接口' 执行逻辑：</div>
                        <div class="col-md-12">（1）按照 '关联链路' 进行排序</div>
                        <div class="col-md-12">（2）替换 '上游接口' 中获取的关联字段</div>
                        <div class="col-md-12">（3）执行 '关联接口'</div>
                        <div class="col-md-12">（4）捕获 '下游接口' 需要的关联字段</div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>关闭</button>
                </div>
            </div>
        </div>
    </div>


    <!-- 配置HOST窗口 -->
    <div id="add_host_form" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <div class="modal-title">
                        <h2 class="text-center">配 置 HOST</h2>
                    </div>
                </div>

                <div class="modal-body">
                    {% for host_dict in host_list %}
                        <div class="form-group" style="margin-top:5px">
                            <label style="margin-left:5px;font-size:18px;" class="text-info"><font color="#5B00AE">{{ host_dict["host_name"] }}</font>&nbsp;&nbsp;->&nbsp;&nbsp;{{ host_dict["host_url"] }}</label>
                            <button style="margin-left:10px" class="btn" type="button" onclick="del_config('{{ pro_name }}', '{{ host_dict["config_id"] }}')">
                                <i class="fa fa-trash-o fa-lg" style="color:#ff0000;margin-bottom:10px;"></i>
                            </button>
                        </div>
                    {% endfor %}
                    <div class="form-group" style="margin-top:30px">
                        <label>host_name：<font color="#DC143C">(必填)</font></label>
                        <input class="form-control" type="text" id="host_name_config">
                    </div>
                    <div class="form-group">
                        <label>host_value：<font color="#DC143C">(必填)</font></label>
                        <input class="form-control" type="text" id="host_value_config">
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>关闭</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" id="config_host" onclick="config_variable('{{ pro_name }}', 'host')"></span> 新增 or 更新 </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 配置全局变量窗口 -->
    <div id="add_global_variable_form" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <div class="modal-title">
                        <h2 class="text-center">配 置 全 局 变 量</h2>
                    </div>
                </div>

                <div class="modal-body">
                    {% for global_variable_dict in global_variable_list %}
                        <div class="form-group" style="margin-top:5px">
                            <label style="margin-left:5px;font-size:18px;" class="text-info"><font color="#5B00AE">{{ global_variable_dict["global_variable_name"] }}</font>&nbsp;&nbsp;->&nbsp;&nbsp;{{ global_variable_dict["global_variable_value"] }}</label>
                            <button style="margin-left:10px" class="btn" type="button" onclick="del_config('{{ pro_name }}', '{{ global_variable_dict["config_id"] }}')">
                                <i class="fa fa-trash-o fa-lg" style="color:#ff0000;margin-bottom:10px;"></i>
                            </button>
                        </div>
                    {% endfor %}
                    <div class="form-group" style="margin-top:30px">
                        <label>global_variable_name：<font color="#DC143C">(必填)</font><font color="#B8860B">  调 用 时 使 用 < > 标 记 </font></label>
                        <input class="form-control" type="text" id="global_variable_name_config">
                    </div>
                    <div class="form-group">
                        <label>global_variable_value：<font color="#DC143C">(必填)</font></label>
                        <input class="form-control" type="text" id="global_variable_value_config">
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>关闭</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" id="config_global_variable" onclick="config_variable('{{ pro_name }}','global_variable')"></span> 新增 or 更新 </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 新增用例窗口 -->
    <div id="add_case_form" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <div class="modal-title">
                        <h2 class="text-center">新增测试用例</h2>
                    </div>
                </div>

                <div class="modal-body">
                    <div class="form-group">
                        <label class="text-info">接口名称：<font color="#DC143C">(必填)</font>&nbsp;&nbsp;<font color="#796400">eg: &nbsp;查询接口::用例01</font>
                            <button type="button" class="btn btn-primary btn-xs" style="margin-left:50px" onclick="get_current_case('{{ pro_name }}')">获取已有用例</button>
                            <button type="button" class="btn btn-info btn-xs" style="margin-left:30px" onclick="clear_current_case()">清除</button>
                            <span id="get_current_case_info" style="margin-left:30px;font-size:12px;"></span>
                        </label>
                        <input class="form-control" type="text" id="interface_name_add"> <!-- placeholder="接口名称" -->
                    </div>
                    <div class="form-group">
                        <label class="text-info">接口地址：<font color="#DC143C">(必填)</font></label>
                        <input class="form-control" type="text" id="interface_url_add">
                    </div>
                    <div class="form-group">
                        <label class="text-info">请求方式：<font color="#DC143C">(必选)</font></label>
                        <div class="fg-line">
                            <select class="form-control" id="request_method_add">
                                <option value=""></option>
                                <option value="GET">GET</option>
                                <option value="POST">POST</option>
                                <option value="PUT">PUT</option>
                                <option value="DELETE">DELETE</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="text-info">请求头文件：<font color="#796400">eg: &nbsp;{"Content-Type": "application/x-www-form-urlencoded"}</font></label>
                        <input class="form-control" type="text" id="request_header_add">
                    </div>
                    <div class="form-group">
                        <label class="text-info">请求参数：<font color="#796400">eg: &nbsp;?name=测试&token=30</font></label>
                        <input class="form-control" type="text" id="request_params_add">
                    </div>
                    <div class="form-group">
                        <label class="text-info">请求正文体：<font color="#796400">eg:&nbsp;&nbsp;{"name":"测试","age":30} 或 name=测试&age=30</font></label>
                        <input class="form-control" type="text" id="request_body_add">
                    </div>
                    <div class="form-group">
                        <label class="text-info">验证模式：<font color="#DC143C">(测试必选)</font></label>
                        <div class="fg-line">
                            <select class="form-control" id="verify_mode_add">
                                <option value=""></option>
                                <option value="1">仅验证关键字段</option>
                                <option value="2">同时验证关键字段和验证响应参数列表</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="text-info">待比较关键字段名列表：<font color="#DC143C">(测试必填)&nbsp;&nbsp;</font><font color="#796400">eg：&nbsp;httpCode,msg,httpRT</font></label>
                        <input class="form-control" type="text" id="compare_core_field_name_list_add">
                    </div>
                    <div class="form-group">
                        <label class="text-info">期望的关键字段值列表：<font color="#DC143C">(测试必填)&nbsp;&nbsp;</font><font color="#796400">eg：&nbsp;200,请求成功,500</font></label>
                        <input class="form-control" type="text" id="expect_core_field_value_list_add">
                    </div>
                    <div class="form-group">
                        <label class="text-info">期望的响应字段列表：</font><font color="#796400">eg: &nbsp;status,msg,code</font></label>
                        <input class="form-control" type="text" id="expect_field_name_list_add">
                    </div>
                    <div class="form-group">
                        <label class="text-info">上游关联用例：<font color="#796400">仅限一个用例名称</font></label>
                        <input class="form-control" type="text" id="upstream_relation_case_add">
                    </div>
                    <div class="form-group">
                        <label class="text-info">下游关联字段名列表：<font color="#796400">eg：&nbsp;key1,key2</font></label>
                        <input class="form-control" type="text" id="downstream_relation_field_name_list_add">
                    </div>
                    <div class="form-group">
                        <label class="text-info">是否为依赖接口：<font color="#DC143C">(必选)</font></label>
                        <div class="fg-line">
                            <select class="form-control" id="is_depend_add">
                                <option value=""></option>
                                <option value="False">否</option>
                                <option value="True">是</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="text-info">依赖字段名列表：<font color="#DC143C">(依赖必填)&nbsp;&nbsp;</font></font><font color="#796400">eg: &nbsp;token,uid</font></label>
                        <input class="form-control" type="text" id="depend_field_name_list_add">
                    </div>
                    <div class="form-group">
                        <label class="text-info">依赖等级：<font color="#DC143C">(依赖必选)</font></label>
                        <div class="fg-line">
                            <select class="form-control" id="depend_level_add">
                                <option value=""></option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="text-info">标签列表: <font color="#796400">eg: &nbsp;回归,监控</font></label>
                        <input class="form-control" type="text" id="tag_name_add">
                    </div>
                    <div class="form-group">
                        <label class="text-info">用例状态：</label>
                        <div class="fg-line">
                            <select class="form-control" id="case_status_add">
                                <option value="False">下线</option>
                                <option value="True">上线</option>
                            </select>
                        </div>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>关闭</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" id="save" onclick="add_case('{{ pro_name }}')"><span class="glyphicon glyphicon-floppy-disk"></span>保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑用例窗口 -->
    <div id="edit_case_form" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <div class="modal-title">
                        <h2 class="text-center">编辑测试用例</h2>
                    </div>
                </div>

                <div class="modal-body">
                    <div class="form-group">
                        <label class="text-info">ID：</label>
                        <label id="case_id_edit"></label>
                    </div>
                    <div class="form-group">
                        <label class="text-info">接口名称：<font color="#DC143C">(必填)</font>&nbsp;&nbsp;<font color="#796400">eg: &nbsp;查询接口::用例01</font></label>
                        <input class="form-control" type="text" id="interface_name_edit">
                    </div>
                    <div class="form-group">
                        <label class="text-info">接口地址：<font color="#DC143C">(必填)</font></label>
                        <input class="form-control" type="text" id="interface_url_edit">
                    </div>
                    <div class="form-group">
                        <label class="text-info">请求方式：<font color="#DC143C">(必选)</font></label>
                        <div class="fg-line">
                            <select class="form-control" id="request_method_edit">
                                <option value=""></option>
                                <option value="GET">GET</option>
                                <option value="POST">POST</option>
                                <option value="PUT">PUT</option>
                                <option value="DELETE">DELETE</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="text-info">请求头文件：<font color="#796400">eg: &nbsp;{"Content-Type": "application/x-www-form-urlencoded"} </font></label>
                        <input class="form-control" type="text" id="request_header_edit">
                    </div>
                    <div class="form-group">
                        <label class="text-info">请求参数：<font color="#796400">eg: &nbsp;?name=测试&age=30&nbsp;&nbsp;</font></label>
                        <input class="form-control" type="text" id="request_params_edit">
                    </div>
                    <div class="form-group">
                        <label class="text-info">请求正文体：<font color="#796400">eg:&nbsp;{"name":"测试","age":30} 或 name=测试&age=30</font></label>
                        <input class="form-control" type="text" id="request_body_edit">
                    </div>
                    <div class="form-group">
                        <label class="text-info">验证模式：<font color="#DC143C">(测试必选)</font></label>
                        <div class="fg-line">
                            <select class="form-control" id="verify_mode_edit">
                                <option value=""></option>
                                <option value="1">仅验证关键字段</option>
                                <option value="2">同时验证关键字段和验证响应参数列表</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="text-info">待比较关键字段名列表：<font color="#DC143C">(测试必填)&nbsp;&nbsp;</font><font color="#796400">eg：&nbsp;httpCode,msg,httpRT</font></label>
                        <input class="form-control" type="text" id="compare_core_field_name_list_edit">
                    </div>
                    <div class="form-group">
                        <label class="text-info">期望的关键字段值列表：<font color="#DC143C">(测试必填)&nbsp;&nbsp;</font><font color="#796400">eg：&nbsp;200,请求成功,500</font></label>
                        <input class="form-control" type="text" id="expect_core_field_value_list_edit">
                    </div>

                    <div class="form-group">
                        <label class="text-info">期望的响应字段列表：</font><font color="#796400">eg: &nbsp;status,msg,code</font></label>
                        <input class="form-control" type="text" id="expect_field_name_list_edit">
                    </div>
                    <div class="form-group">
                        <label class="text-info">上游关联用例：<font color="#796400">仅限一个用例名称</font></label>
                        <input class="form-control" type="text" id="upstream_relation_case_edit">
                    </div>
                    <div class="form-group">
                        <label class="text-info">下游关联字段名列表：<font color="#796400">eg：&nbsp;key1,key2</font></label>
                        <input class="form-control" type="text" id="downstream_relation_field_name_list_edit">
                    </div>
                    <div class="form-group" style="font-size:16px;" >
                        <label class="text-info" style="color:#4B0091;"> 当 前 是 </label>
                        <label id="is_depend_edit" style="color: #DC143C; font-weight: bold;"></label>
                        <label class="text-info" style="color:#4B0091;"> 接 口 </label>
                    </div>
                    <div class="form-group">
                        <label class="text-info">依赖字段名列表：<font color="#DC143C">(依赖必填)&nbsp;&nbsp;</font></font><font color="#796400">eg: &nbsp;token,uid</font></label>
                        <input class="form-control" type="text" id="depend_field_name_list_edit">
                    </div>
                    <div class="form-group">
                        <label class="text-info">依赖等级：<font color="#DC143C">(依赖必选)</font></label>
                        <div class="fg-line">
                            <select class="form-control" id="depend_level_edit">
                                <option value=""></option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="text-info">标签列表: <font color="#796400">eg: &nbsp;回归,监控</font></label>
                        <input class="form-control" type="text" id="tag_name_edit">
                    </div>
                    <div class="form-group">
                        <label class="text-info">用例状态：</label>
                        <div class="fg-line">
                            <select class="form-control" id="case_status_edit">
                                <option value="False">下线</option>
                                <option value="True">上线</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>关闭</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" id="edit" onclick="edit_case('{{ pro_name }}')"><span class="glyphicon glyphicon-floppy-disk"></span>更新</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 显示测依赖口响应信息 -->
    <div id="show_depend_response_info" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <div class="modal-title">
                        <h2 class="text-center">依 赖 接 口 响 应 信 息</h2>
                    </div>
                </div>

                <div class="modal-body">
                    <div class="form-group">
                        <label>ID：</label>
                        <label id="case_id_show_depend"></label>
                    </div>
                    <div class="form-group">
                        <label>依赖接口：</label>
                        <label id="is_depend_show_depend"></label>
                    </div>
                    <div class="form-group">
                        <label>接口名称：</label>
                        <label id="interface_name_show_depend"></label>
                    </div>
                    <div class="form-group">
                        <label>接口地址：</label>
                        <label id="interface_url_show_depend"></label>
                    </div>
                    <div class="form-group">
                        <label>请求方式：</label>
                        <label id="request_method_show_depend"></label>
                    </div>
                    <div class="form-group">
                        <label>请求头文件：</label>
                        <label id="request_header_show_depend"></label>
                    </div>
                    <div class="form-group">
                        <label>请求参数：</label>
                        <label id="request_params_show_depend"></label>
                    </div>
                    <div class="form-group">
                        <label>请求正文体：</label>
                        <label id="request_body_show_depend"></label>
                    </div>
                    <div class="form-group">
                        <label>用例状态：</label>
                        <label id="case_status_show_depend"></label>
                    </div>
                    <div class="form-group">
                        <label>响应信息：</label>
                        <label id="response_info_show_depend"></label>
                    </div>
                    <div class="form-group">
                        <label>依赖等级：</label>
                        <label id="depend_level_show_depend"></label>
                    </div>
                    <hr />
                    <div class="form-group">
                        <label><font color="#5B00AE">依赖字段名列表：</font></label>
                        <label id="depend_field_name_list_show_depend"></label>
                    </div>
                    <div class="form-group">
                        <label><font color="#5B00AE">依赖字段值列表：</font></label>
                        <label id="depend_field_value_list_show_depend"></label>
                    </div>
                    <hr />
                    <div class="form-group">
                        <label><font color="#5B00AE">测试结果：</font></label>
                        <label id="test_result_show_depend"></label>
                    </div>
                    <hr />
                    <div class="form-group">
                        <label>更新时间：</label>
                        <label id="update_time_show_depend"></label>
                    </div>
                    <div class="form-group">
                        <label>创建时间：</label>
                        <label id="create_time_show_depend"></label>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 显示测试接口响应信息 -->
    <div id="show_test_response_info" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <div class="modal-title">
                        <h2 class="text-center">测 试 接 口 响 应 信 息</h2>
                    </div>
                </div>

                <div class="modal-body">
                    <div class="form-group">
                        <label>ID：</label>
                        <label id="case_id_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label>依赖接口：</label>
                        <label id="is_depend_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label>接口名称：</label>
                        <label id="interface_name_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label>接口地址：</label>
                        <label id="interface_url_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label>请求方式：</label>
                        <label id="request_method_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label>请求头文件：</label>
                        <label id="request_header_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label>请求参数：</label>
                        <label id="request_params_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label>请求正文体：</label>
                        <label id="request_body_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label>用例状态：</label>
                        <label id="case_status_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label>验证模式：</label>
                        <label id="verify_mode_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label>响应状态码：</label>
                        <label id="http_code_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label>响应时间(毫秒)：</label>
                        <label id="http_rt_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label>响应信息：</label>
                        <label id="response_info_show_test"></label>
                    </div>

                    <hr />
                    <div class="form-group">
                        <label>上游关联用例：</label>
                        <label id="upstream_relation_case_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label>下游关联字段名列表：</label>
                        <label id="downstream_relation_field_name_list_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label>下游关联字段值列表：</label>
                        <label id="downstream_relation_field_value_list_show_test"></label>
                    </div>

                    <hr />
                    <div class="form-group">
                        <label><font color="#5B00AE">待比较关键字段名列表：</font></label>
                        <label id="compare_core_field_name_list_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label><font color="#5B00AE">期望的关键字段值列表：</font></label>
                        <label id="expect_core_field_value_list_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label><font color="#5B00AE">实际的关键字段值列表：</font></label>
                        <label id="actual_core_field_value_list_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label><font color="#5B00AE">关键字段值比较结果：</font></label>
                        <label id="result_core_field_value_show_test"></label>
                    </div>
                    <hr />
                    <div class="form-group">
                        <label><font color="#5B00AE">期望的响应字段列表：</font></label>
                        <label id="expect_field_name_list_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label><font color="#5B00AE">实际的响应字段列表：</font></label>
                        <label id="actual_field_name_list_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label><font color="#5B00AE">响应字段列表比较结果：</font></label>
                        <label id="result_field_name_list_show_test"></label>
                    </div>
                    <hr />
                    <div class="form-group">
                        <label><font color="#5B00AE">测试结果：</font></label>
                        <label id="test_result_show_test"></label>
                    </div>
                    <hr />
                    <div class="form-group">
                        <label>更新时间：</label>
                        <label id="update_time_show_test"></label>
                    </div>
                    <div class="form-group">
                        <label>创建时间：</label>
                        <label id="create_time_show_test"></label>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>关闭</button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}


{% block js %}
    <script src="/static/js/common.js" type="text/javascript"></script>
    <script src="/static/js/project.js" type="text/javascript"></script>
    <script src="/static/js/sweetalert.min.js" type="text/javascript"></script>
    <script src="/static/js/jquery.dataTables.js" type="text/javascript"></script>
    <script src="/static/js/dataTables.bootstrap.js" type="text/javascript"></script>

    <script type="text/JavaScript">
        {# 激活 气泡弹层 #}
        $(function (){ $("[data-toggle='popover']").popover(); });
        {# 若当前有用例在运行，则实时更新进度信息 #}
        $(document).ready(function () { if('{{is_run}}' == 'True'){ background_polling('{{pro_name}}');} });
        {# 设置埋点，控制台显示页面的 '白屏时间' #}
        console.log("页面白屏时间 : " + (performance.timing['responseStart'] - performance.timing['navigationStart']).toString())
    </script>
{% endblock %}